<template>
  <div class="user-moment-container">
    <div class="moment-header">
      <div class="back-link">
        <router-link to="/dashboard/moment" class="el-link el-link--default">
          <i class="el-icon-arrow-left"></i> 返回所有朋友圈
        </router-link>
      </div>
      <h2>{{ userName || `用户${userId}` }}的朋友圈</h2>
    </div>
    
    <div class="moment-list">
      <moment-item
        v-for="moment in momentList"
        :key="moment.id"
        :moment="moment"
        :like-count="likeMap[moment.id] || 0"
        :comment-count="commentCountMap[moment.id] || 0"
        :comments="commentsMap[moment.id] || []"
        :is-liked="isLiked(moment.id)"
        :current-user-id="currentUserId"
        @like="handleLike"
        @delete="deleteMoment"
        @comment="submitComment"
        @delete-comment="deleteComment"
      />
      
      <div class="no-data" v-if="momentList.length === 0">
        <el-empty description="该用户暂无朋友圈动态"></el-empty>
      </div>
    </div>
  </div>
</template>

<script>
import { 
  getUserMoments, 
  deleteMoment as apiDeleteMoment,
  likeMoment,
  unlikeMoment,
  commentMoment,
  deleteComment as apiDeleteComment,
  getMomentDetail
} from '@/api/moment';
import MomentItem from '@/components/MomentItem';

export default {
  name: 'UserMoment',
  components: {
    MomentItem
  },
  data() {
    return {
      userId: null,
      userName: '',
      momentList: [],
      currentUserId: null,
      likeMap: {}, // 存储每个动态的点赞数
      likedMoments: [], // 当前用户点赞的动态ID
      commentCountMap: {}, // 存储每个动态的评论数量
      commentsMap: {} // 存储每个动态的评论列表
    }
  },
  created() {
    this.userId = parseInt(this.$route.params.userId);
    this.currentUserId = parseInt(localStorage.getItem('userId') || '1');
    this.loadUserMoments();
  },
  methods: {
    // 加载用户朋友圈列表
    loadUserMoments() {
      getUserMoments(this.userId).then(response => {
        if (response.data.code === 200) {
          this.momentList = response.data.data;
          // 加载每个动态的详情（包括点赞和评论信息）
          this.momentList.forEach(moment => {
            this.loadMomentDetail(moment.id);
          });
        } else {
          this.$message.error('获取用户朋友圈失败');
        }
      }).catch(error => {
        console.error('获取用户朋友圈失败', error);
        this.$message.error('网络错误');
      });
    },
    
    // 加载动态详情
    loadMomentDetail(momentId) {
      getMomentDetail(momentId).then(response => {
        if (response.data.code === 200) {
          this.$set(this.likeMap, momentId, response.data.likeCount);
          this.$set(this.commentCountMap, momentId, response.data.commentCount);
          this.$set(this.commentsMap, momentId, response.data.comments);
        }
      }).catch(error => {
        console.error('获取动态详情失败', error);
      });
    },
    
    // 删除动态
    deleteMoment(id) {
      this.$confirm('确认删除这条动态?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        apiDeleteMoment(id).then(response => {
          if (response.data.code === 200) {
            this.$message.success('删除成功');
            this.loadUserMoments();
          } else {
            this.$message.error(response.data.msg || '删除失败');
          }
        }).catch(error => {
          console.error('删除动态失败', error);
          this.$message.error('网络错误');
        });
      }).catch(() => {
        // 取消删除
      });
    },
    
    // 处理点赞/取消点赞
    handleLike(moment) {
      const isLiked = this.isLiked(moment.id);
      
      if (isLiked) {
        // 取消点赞
        unlikeMoment({
          momentId: moment.id,
          userId: this.currentUserId
        }).then(response => {
          if (response.data.code === 200) {
            const index = this.likedMoments.indexOf(moment.id);
            if (index !== -1) this.likedMoments.splice(index, 1);
            this.$set(this.likeMap, moment.id, response.data.likeCount);
          } else {
            this.$message.error(response.data.msg || '取消点赞失败');
          }
        }).catch(error => {
          console.error('取消点赞失败', error);
          this.$message.error('网络错误');
        });
      } else {
        // 点赞
        likeMoment({
          momentId: moment.id,
          userId: this.currentUserId
        }).then(response => {
          if (response.data.code === 200) {
            this.likedMoments.push(moment.id);
            this.$set(this.likeMap, moment.id, response.data.likeCount);
          } else {
            this.$message.error(response.data.msg || '点赞失败');
          }
        }).catch(error => {
          console.error('点赞失败', error);
          this.$message.error('网络错误');
        });
      }
    },
    
    // 判断动态是否已点赞
    isLiked(momentId) {
      return this.likedMoments.includes(momentId);
    },
    
    // 提交评论
    submitComment(data) {
      const comment = {
        momentId: data.momentId,
        userId: this.currentUserId,
        content: data.content
      };
      
      commentMoment(comment).then(response => {
        if (response.data.code === 200) {
          this.$message.success('评论成功');
          this.$set(this.commentCountMap, data.momentId, response.data.commentCount);
          this.loadMomentDetail(data.momentId);
        } else {
          this.$message.error(response.data.msg || '评论失败');
        }
      }).catch(error => {
        console.error('评论失败', error);
        this.$message.error('网络错误');
      });
    },
    
    // 删除评论
    deleteComment(data) {
      this.$confirm('确认删除这条评论?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        apiDeleteComment(data.commentId, data.momentId).then(response => {
          if (response.data.code === 200) {
            this.$message.success('删除评论成功');
            this.$set(this.commentCountMap, data.momentId, response.data.commentCount);
            this.loadMomentDetail(data.momentId);
          } else {
            this.$message.error(response.data.msg || '删除评论失败');
          }
        }).catch(error => {
          console.error('删除评论失败', error);
          this.$message.error('网络错误');
        });
      }).catch(() => {
        // 取消删除
      });
    }
  }
}
</script>

<style scoped>
.user-moment-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.moment-header {
  margin-bottom: 20px;
  position: relative;
}

.back-link {
  margin-bottom: 10px;
}

.moment-list {
  margin-top: 20px;
}

.no-data {
  margin-top: 40px;
  text-align: center;
}
</style> 